var app = new Vue({
	el: '#app',
	data: {
		message: 'Hello Vue!'
	}
});

var app2 = new Vue({
	el: '#app-2',
	data:{
		message:'页面加载于' + new Date().toLocaleString()
	}
});

var app3 = new Vue({
	el:'#app-3',
	data:{
		seen:true
	}
})

var app4 = new Vue({
	el:'#app-4',
	data:{
		todos:[
			{text:'学习 JavaScript'},
			{text:'学习 Vue'},
			{text:'整个牛项目'}
		]
	}
})

var app5 = new Vue({
	el:'#app-5',
	data:{
		message:'Hello Vue.js'
	},
	methods:{
		reverseMessage:function(){
			this.message = this.message.split('').reverse().join('')
		}
	}
})

var app6 = new Vue({
	el:'#app-6',
	data:{
		message:'Hello Vue'
	}
})

/*
在Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例。
Vue中注册组件

//定义名为 todo-item 的新组件
Vue.component('todo-item', {
	template:'<li>这是个待办项</li>'
})
*/
Vue.component('todo-item',{
	//todo-item 组件现在接收一个
	//“prop”，类似于一个自定义特性。
	//这个 prop 名为 todo
	props:['todo'],
	template:'<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
	el:'#app-7',
	data:{
		groceryList:[
			{id:0, text:'蔬菜'},
			{id:1, text:'奶酪'},
			{id:3, text:'随便其它什么人吃的东西'}
		]
	}
})